/**
 * 费用的里程补贴
 */
import React  from 'react'
import moment from 'moment'
import { messages, queryCurrencyPrecision } from 'share/common'
import { Table, Row, Col, Modal, Form, Popover, Spin } from 'antd';
import 'styles/my-account/components/mileage-allowance.scss'
import Condition from 'components/condition';
import WayPointMap from 'containers/mileage-subsidy-expense/components/way-point-map';

const FormItem = Form.Item;
const { If } = Condition;

class ExpenseMileageAllowance extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      columns: [
        {title: messages('my-account.key68'/*出发信息*/), dataIndex: 'start', render: (value, record) =>
          this.renderMileageAllowanceExpenseOrder(value, record.departTime)
        },
        {title: messages('my-account.key69'/*到达信息*/), dataIndex: 'end', render: (value, record) =>
          this.renderMileageAllowanceExpenseOrder(value, record.arriveTime)
        },
        {
          title: messages('my-account.key70'/*里程*/) + '(KM)',
          dataIndex: 'mileage',
          render: (value, record) => (
            <div>
              <div>{value.toFixed(2)}</div>
              {!!record.travelMileage &&  <div>{messages('my-account.key333')/*行驶*/}:{(record.travelMileage).toFixed(2)}</div>}
              <div>{messages('common.reference')/*参考*/}:{record.referenceMileage && record.referenceMileage.toFixed(2)}</div>
            </div>
          )
        },
        {title: `${messages('my-account.key324')/*创建方式*/}：`, dataIndex: 'createdMode', render: value => this.renderMode(value)},

        {title: messages('common.matter')/*事由*/, dataIndex: 'remark', render: value => value || '-'},
        {
          title: messages('mileage-subsidy-expense.key25'/*操作*/),
          dataIndex: '',
          render: (text,record) => <WayPointMap record={record}/>
        }
      ],
      allowanceColumns: [
        {title: messages('my-account.key70'/*里程*/), dataIndex: 'startUnit', render: (value, record) =>
          `${value.toFixed(2)}${record.endUnit === -1 ? messages('my-account.key140'/*以上*/) : ('~' + record.endUnit.toFixed(2))}`
        },
        {title: `${messages('common.price')/*单价*/}/KM ${this.props.mileageAllowance.currency}`, dataIndex: 'unitPrice',
          render: (value, record) => this.filterMoney(value, record.currencyCode)
        },
        {title: messages('common.amount')/*金额*/, dataIndex: 'amount', render: (value, record) =>
          this.filterMoney(value, record.currencyCode)
        }
      ],
    }
  }

  renderMode = (value) => {
    if (value === 1001) {
      return messages('mileage-subsidy-expense.key55')/*手工创建*/;
    }
    if (value === 1002) {
      return messages('mileage-subsidy-expense.key56')/*定位创建*/;
    }
    return '-';
  };

  //渲染出发／到达信息
  renderMileageAllowanceExpenseOrder = (value, date) => (
    <div>
      {new Date(date).format('yyyy-MM-dd hh:mm:ss')}<br/>
      {value.place}
    </div>
  );

  onRowClick = (record) => {
      this.setState({ record: record, visible: true })
  };

  onCancel = () => {
    this.setState({ visible:false })
  };


  renderExpanded = (record) => {
    return record['viaPoints'] && record['viaPoints'][0]
      ? (
        <section className="mileage-point">
          {
            record['viaPoints'].map(value =>
              <Row className="mileage-point-row">
                <Col span={4}>
                  {moment(value.arrivalTime).format('YYYY-MM-DD HH:mm:ss')}
                </Col>
                <Col span={10}>
                  {value.place}
                </Col>
                <If value={value.originPoint}>
                  <Col span={10} className="mileage-point-row_origin">
                    {messages('my-account.key325')/*[原定位]*/} {value.originPoint && JSON.parse(value.originPoint).place}
                  </Col>
                </If>
              </Row>
            )}
        </section>
      )
      : null;
  };

  render(){
    const { mileageAllowance, currencyPrecision } = this.props;
    const { columns, allowanceColumns, record, visible } = this.state;
    const formItemLayout = {
      labelCol: {span: 8},
      wrapperCol: {span: 12, offset: 1}
    };
    let popoverContent = (
      <Table
        columns={allowanceColumns}
        dataSource={mileageAllowance.steps || []}
        rowKey="startUnit"
        pagination={false}
        size="small"/>
    );
    return(
      <div className="expense-mileage-allowance">
        <FormItem {...formItemLayout} label={messages('my-account.key137'/*累计里程*/)}>
          {mileageAllowance.mileage.toFixed(2)}KM
          <span className="reference-mileage">
            {messages('my-account.key138'/*参考里程*/)}：&nbsp;{mileageAllowance.referenceMileage.toFixed(2)}KM
          </span>
        </FormItem>
        <FormItem {...formItemLayout} label={messages('my-account.key139'/*补贴总额*/)}>
          {mileageAllowance.currency}&nbsp;&nbsp;{mileageAllowance.amount.toFixed(queryCurrencyPrecision(currencyPrecision))}
          <Popover placement="top" overlayStyle={{width: 400}} content={popoverContent}>
            <a className="amount-detail">{messages('my-account.key141'/*查看计价明细*/)}</a>
          </Popover>
        </FormItem>
        <FormItem {...formItemLayout} label={messages('my-account.key142'/*里程明细*/)} className="mileage-detail"/>
        <Table
          rowKey="id"
          size="small"
          columns={columns}
          expandedRowRender={this.renderExpanded}
          rowClassName={record => (record.viaPoints || []).length > 0 ? '' : 'row-expand-display-none'}
          dataSource={mileageAllowance.mileageAllowanceOrders || []}
          onRow={record => ({
            onClick: () => this.onRowClick(record)
          })}
          pagination={false}
          style={{ marginBottom: 24, width: '98%' }}
        />

        <Modal
          visible={visible}
          title={messages('mileage-subsidy-expense.key17'/*里程明细*/)}
          footer={[]}
          onCancel={this.onCancel}
          className="mileage-detail-modal">
          <Row>
            <Col span={4}>{messages('my-account.key324')/*创建方式*/}：</Col>
            <Col span={20}>{this.renderMode(record && record.createdMode)}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('mileage-subsidy-expense.key19'/*上车时间*/)}:</Col>
            <Col span={20}>{record && moment(record.departTime).format('YYYY-MM-DD HH:mm')}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('mileage-subsidy-expense.key20'/*上车地点*/)}:</Col>
            <Col span={20}>
              <section className="mileage-detail-point">
                <div>{record && record.start.place}</div>
                <If value={record && record.originStart}>
                  <div className="mileage-detail-point_origin">
                    {messages('mileage-subsidy-expense.key59')/*[原定位]*/}{record && record.originStart && record.originStart.place}
                  </div>
                </If>
              </section>
            </Col>
          </Row>

          <If value={record && record.viaPoints && record.viaPoints[0]}>
            <Row>
              <Col span={4}>{messages('my-account.key326')/*途径信息*/}</Col>
              <Col span={20}>
                {record && record.viaPoints && record.viaPoints.map(value => {
                  return (
                    <section className="mileage-detail-point">
                      <div>
                        {moment(value.arrivalTime).format('YYYY-MM-DD HH:mm')}
                      </div>
                      <div>
                        {value.place}
                      </div>
                      <If value={value.originPoint}>
                        <div className="mileage-detail-point_origin">
                          {messages('my-account.key325')/*[原定位]*/}{value.originPoint && JSON.parse(value.originPoint).place}
                        </div>
                      </If>
                    </section>
                  );
                })}
              </Col>
            </Row>
          </If>
          <Row>
            <Col span={4}>{messages('mileage-subsidy-expense.key21'/*下车时间*/)}:</Col>
            <Col span={20}>{record && moment(record.arriveTime).format('YYYY-MM-DD HH:mm')}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('mileage-subsidy-expense.key22'/*下车地点*/)}:</Col>
            <Col span={20}>
              <section className="mileage-detail-point">
                <div>{record && record.end.place}</div>
                <If value={record && record.originEnd}>
                  <div className="mileage-detail-point_origin">
                    {messages('mileage-subsidy-expense.key59')/*[原定位]*/}{record && record.originEnd && record.originEnd.place}
                  </div>
                </If>
              </section>
            </Col>
          </Row>
          <Row>
            <Col span={6}>{messages('mileage-subsidy-expense.key23'/*实际里程(KM)*/)}:</Col>
            <Col span={18}>{record && record.mileage.toFixed(2)}</Col>
          </Row>
          <If value={record && record.travelMileage}>
            <Row>
              <Col span={6}>{messages('mileage-subsidy-expense.key66')/*行驶里程*/}:</Col>
              <Col span={18}>{(record && record.travelMileage || 0).toFixed(2)}</Col>
            </Row>
          </If>
          <Row>
            <Col span={6}>{messages('mileage-subsidy-expense.key12'/*参考里程(KM)*/)}:</Col>
            <Col span={18}>{record && record.referenceMileage.toFixed(2)}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('mileage-subsidy-expense.key6'/*事由说明*/)}:</Col>
            <Col span={20}>{record && record.remark || '-'}</Col>
          </Row>
        </Modal>

      </div>
    )
  }
}

ExpenseMileageAllowance.propTypes = {
  mileageAllowance: React.PropTypes.object,
  currencyPrecision: React.PropTypes.string
};

export default ExpenseMileageAllowance;
